<template>
  <div >
    <div  style="background-image: url('static/assets/pic/bg.png');min-height: 150px;background-size: cover;display: flex;justify-content: space-around;align-items: center">
      <div class="col-md-10" ><p style="font-size: 30px">欢迎登陆！！！</p></div>
      <div class="col-md-2"><p style="font-size: 18px">等待您发现更多宝藏藏品</p></div>
    </div>
    <div class="main">
      <div class="imgContainer"></div>
      <el-tabs v-model="active" style=" width:600px;margin: 0 auto ;font-size: 20px">
        <el-tab-pane label="用户登录" name="1">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input  v-model="ruleForm.username" auto-complete="off" maxlength="11" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" auto-complete="off" maxlength="16" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="identitycode">
              <el-input   v-model="ruleForm.identitycode" style="width: 300px" placeholder="请输入右侧验证码(不区分大小写)，点击刷新"></el-input>
              <div style="width: 100px;height: 44px; position:absolute;right: 56px;bottom: 5px;">
                <Identity :changeCode.sync='identify' ></Identity>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="用户注册" name="2">
          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="80px" class="demo-ruleForm">
            <el-form-item label="手机号" prop="mobilephone">
              <el-input type="phone" v-model="ruleForm2.mobilephone" auto-complete="off" maxlength="11" placeholder="请输入您的手机号"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
              <el-input  v-model="ruleForm2.username" auto-complete="off" maxlength="11" placeholder="请输入您的用户名"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm2.password" auto-complete="off" maxlength="16" placeholder="请输入您的密码"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="twicePassword">
              <el-input type="password" v-model="ruleForm2.twicePassword" auto-complete="off" maxlength="16" placeholder="请再次输入您的密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm2('ruleForm2')" >注册</el-button>
              <el-button @click="resetForm('ruleForm2')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import Identity from '../utils/identity'
import  {setToken} from '../utils/token'
import {baseUrl} from '../utils/Address'
export default{
  mounted () {

  },
  components:{
    Identity,
  },
  data () {
    let reg = /^1[0-9]{10}$/
    let validatePhone =(rule, value, callback)=>{
      if(reg.test(value)) {
        callback()
      }else{
        callback(new Error('输入手机号码非法'))
      }
    }
    var validatePass = (rule, value, callback) => {
      if(value === ''){
        callback(new Error('密码不能为空'));
      }else{
        callback();
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if(value === ''){
        callback(new Error('密码不能为空'));
      }else{
        callback();
      }
    }
    var twicePassword=(rule,value,callback)=>{
      if(value===''){
        callback(new Error('请输入密码'))
      }
      else if(value!==this.ruleForm2.password){
        callback(new Error('两次输入密码不匹配'))
      }
      else{
        callback()
      }
    }
    let checkIdentity=(rule,value,callback)=>{
      if(value==='') {
        callback(new Error('请输入验证码'))
      }
      else if(value!==this.identify.toLowerCase()){
        callback(new Error('输入验证码有误，点击刷新'))
      }
      else{
        callback();
      }
    }
    return{
      ruleForm: {
        username: '',
        password: '',
        identitycode: '',
      },
      identify:'',
      ruleForm2: {
        mobilephone: '',
        username: '',
        password: '',
        twicePassword:'',
      },
      active:'1',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          {validator: validatePass, trigger: 'blur'},
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        identitycode:[
          {validator:checkIdentity,trigger: 'blur'},
          { required: true, message: '请输入右侧验证码', trigger: 'blur' }
        ]
      },
      rules2:{
        mobilephone: [
          {validator: validatePhone, trigger: 'blur'},
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          {validator: validatePass2, trigger: 'blur'},
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        twicePassword:[
          {validator: twicePassword, trigger: 'blur'},
          { required: true, message: '请再次输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (! valid) {
          return
        }else{
          //
          let userLogin={}
          Object.keys(this.ruleForm).forEach(key=>{
            if(key!=='identitycode')
              userLogin[key]=this.ruleForm[key]
          })
          console.log(userLogin)
          this.axios.post(`${baseUrl}/user/login`, userLogin).then(res=>{
            if(res.data.message==='登录成功'){
             this.$message.success('欢迎登陆' + '    ' +this.ruleForm.username)
              window.localStorage.setItem('userId', res.data.data.userid)
              window.localStorage.setItem('username', this.ruleForm.username)
              setToken(res.data.data.token)
              this.$router.push('/')
           }else {
              this.$notify.error({
                title: '登陆失败',
                message: res.data.message,
              });
              this.$refs.ruleForm.resetFields();
           }
         })
        }
      });
    },
    submitForm2(){
      this.$refs.ruleForm2.validate(validate=>{
        if (!validate){
          return false
        }
        else{
          let userInfo={};
          for (const key in this.ruleForm2) {
            if(key!=='twicePassword'){
              userInfo[key]=this.ruleForm2[key]
            }
          }
          console.log(userInfo)
          this.$http.post(`${baseUrl}/user/register` , userInfo).then(res=>{
            if(res.data.flag===true){
              this.$notify({
                title: '注册成功',
                message: '快去登陆吧',
                type: 'success'
              });
              this.$refs.ruleForm2.resetFields();
            }else{
              this.$notify.error({
                title: '注册失败',
                message: res.data.message,
              });
              this.$refs.ruleForm2.resetFields();
            }
          }).catch(err=>{
            console.log(err);
            this.$message.error('注册失败啦')
          })
        }
      })
    },
  }
}
</script>

<style  scoped>
  .demo-ruleForm {
  position: relative;
}

.el-form{
  width: 600px;
  margin: 40px auto;
}
h3{
  display: block;
  height: 40px;
  line-height: 40px;
  position: absolute;
}
h3:first-child{
  font-size: 40px;
  top: 30px;
  left: 30px;
}
h3:last-child{
  right: 10px;
  font-size: 15px;
  top: 40px;
}
.imgContainer {
  width: 200px;
  height: 200px;
  background: url("/static/assets/pic/logo1.png") no-repeat center 100%;
  margin: 0 auto;
}

</style>

